<template>
  <div class="app-container">
    数据表单
    <el-form label-width="120px">
      <el-form-item label="语法/语义">
        <el-input v-model="information.field" />
      </el-form-item>


      <el-form-item label="语言学术语">
        <el-input v-model="information.linguisticsTerm" />
      </el-form-item>


      <el-form-item label="坏句子">
        <el-input v-model="information.sentenceBad" type="textarea" />
      </el-form-item>

      <el-form-item label="好句子">
        <el-input v-model="information.sentenceGood" type="textarea" />
      </el-form-item>

      <el-form-item label="UID">
        <el-input v-model="information.uid" type="textarea" />
      </el-form-item>
      <el-form-item label="所属数据集">
        <el-select v-model="information.belongId" placeholder="请选择所属数据集" width="240" @change="$forceUpdate()">
          <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>
<script>
import informationApi from '@/api/edu/exampInfo'
export default {
  data() {
    return {
      options: {},
      information: {
        name: '',
        vulnId: '',
        published: '',
        modified: '',
        severity: '',
        vulnType: '',
        vulnDescript: '',
        belongId: ''
      },
      saveBtnDisabled: false  // 保存按钮是否禁用,
    }
  },
  created() { //页面渲染之前执行
    this.dealBelongId()
    this.init()
  },
  watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  methods: {
    //处理belongId
    dealBelongId() {
      informationApi.dealBelongId().then((response) => {
        console.log("response data: ", response.data)
        this.options = response.data
      });
    },

    init() {
      //判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        const id = this.$route.params.id
        //调用根据id查询的方法
        this.getInfo(id)
      } else { //路径没有id值，做添加
        //清空表单
        this.information = {}
      }
    },
    //根据信息id查询的方法
    getInfo(id) {
      informationApi.getInformationInfo(id)
        .then(response => {
          this.information = response.data
          // 从路径中获取belongId参数
          this.information.belongId = this.$route.query.belongId
          console.log("getInfo : ", this.information)
        })
    },
    saveOrUpdate() {
      //判断修改还是添加
      //根据路由是否有id
      if (!this.information.id) {
        //添加
        this.saveInformation()
      } else {
        //修改
        this.updateInformation()
      }
    },
    //修改数据的方法
    updateInformation() {
      informationApi.updateInformationInfo(this.information.id, this.information)
        .then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          //回到列表页面 路由跳转
          this.$router.push({ path: '/example/file' })
        })
    },
    //添加数据的方法
    saveInformation() {
      informationApi.addInformation(this.information)
        .then(response => {//添加成功
          //提示信息
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          //回到列表页面 路由跳转
          this.$router.push({ path: '/example/file' })
        })
    }

  }
}
</script>